(function () {

    const htmlImage = {
        container: 'thumb-html',
        canvasId: 'htmlImageCanvas',
        canvas: null,
        /**
         * 在本地进行文件保存
         * @param   canvasImage
         * @param  {String} filename 文件名
         */
        saveFile(canvasImage, filename) {
            const save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
            save_link.href = canvasImage;
            save_link.download = filename;

            const event = document.createEvent('MouseEvents');
            event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
            save_link.dispatchEvent(event);
        },
        saveFileByHtml(target, filename) {
            target = document.getElementById(target);

            let canvas = document.createElement("canvas")
            const width = target.offsetWidth;
            const height = target.offsetHeight;
            canvas.width = width + 1000;
            canvas.height = height + 1000;
            canvas.style.width = width + "px";
            canvas.style.height = height + "px";
            const self = this;
            html2canvas(target, {
                canvas,
                onrendered(canvas) {
                    // console.log(canvas);
                    const canvasImage = canvas.toDataURL("image/png");
                    if (typeof filename === 'function') {
                        filename(canvas, canvasImage);
                        return;
                    }
                    self.saveFile(canvasImage, filename);
                },
            });
            return this;
        },
        saveFileByHtml2(target, filename) {
            target = document.getElementById(target);
            let canvas = document.createElement("canvas");
            canvas.setAttribute('id', this.canvasId);
            const width = target.offsetWidth;
            const height = target.offsetHeight;
            canvas.width = width + 1000;
            canvas.height = height + 1000;
            canvas.style.width = width + "px";
            canvas.style.height = height + "px";
            const self = this;
            html2canvas(target, {
                canvas,
                onrendered(canvas) {
                    console.log(canvas);
                    const canvasImage = canvas.toDataURL("image/png");
                    if (typeof filename === 'function') {
                        filename(canvas, canvasImage);
                        return;
                    }
                    self.saveFile(canvasImage, filename);
                },
            });
            return this;
        },
        closeHtmlImageModal(container) {
            container = container || this.container;
            document.getElementById(this.container).style.display = 'none';
        },
        closeHtmlModal(container) {
            document.querySelector(container).style.display = 'none';
        },
        takeScreenShot(target, showTarget = 'thumb-image') {
            target = document.getElementById(target);
            showTarget = document.getElementById(showTarget);
            document.getElementById(this.container).style.display = 'block';
            let canvas = document.createElement("canvas")
            canvas.setAttribute('id', this.canvasId);
            const width = showTarget.offsetWidth;
            const height = showTarget.offsetHeight;
            canvas.width = target.offsetWidth;
            canvas.height = height + 250;
            canvas.style.width = width + "px";
            canvas.style.height = height + "px";
            const self = this;
            html2canvas(target, {
                canvas,
                onrendered(canvas) {
                    // console.log(canvas)
                    showTarget.innerHTML = "<img src='" + canvas.toDataURL("image/png") + "'>";
                    // showTarget.appendChild(canvas)
                    self.canvas = canvas;
                },
            });
            return this;
        }
    }
    window.htmlImage = htmlImage;
    const targetDom = document.getElementById(htmlImage.container);
    if (targetDom) {
        targetDom.addEventListener('tap', function (e) {
            if (e.target.id === htmlImage.container) {
                htmlImage.closeHtmlImageModal();
            }
        })
    }

}())